<template>
  <div class="common-layout">
    <el-container>
      <el-header class="el-header">
        <div>
          <img
            src="../../assets/1.png"
            style="width: 1rem; height: 1rem; border-radius: 50%"
            alt=""
            @click="www"
            class="oror"
          />
        </div>
        <div>
          <h3>{{ fuck.disease }}</h3>
        </div>

        <img src="../../assets/3.png" alt="" class="yes" @click="yuia" />
      </el-header>

      <div class="cheng"></div>
      <el-main>
        <div class="baga">
          <h1 class="ls">{{ fuck.detail }}</h1>
          <p class="ls">[病症]</p>

          <p class="p1">{{ fuck.title }}</p>
          <div class="liu"></div>
          <p class="ls">[科室]</p>
          <p class="p1">{{ fuck.department }}</p>
          <div class="liu"></div>
          <p class="ls">[病症详情]</p>
          <p class="p1">{{ fuck.title }}</p>
          <div class="liu"></div>
          <p class="ls">[治疗经历]</p>
          <p class="p1">
            <span>{{ fuck.treatmentProcess }}</span>
          </p>
          <p class="p1">
            {{ fuck.treatmentProcess }}
          </p>
          <div class="liu"></div>
          <p class="ls">[相关图片]</p>
          <img class="img1" src="@/image/病例照片.png" alt="" />

          <p class="zp">
            <el-icon class="ic1"
              ><img src="../../assets/233.png" alt="" v-if="!flag" @click="sc" /><img
                src="../../assets/322.png"
                alt=""
                v-if="flag"
                @click="qx" /></el-icon
            ><span class="fff">{{ fuck.collectionNum }}</span>

            <el-icon class="ic"><ChatDotRound /></el-icon
            ><span class="fff1">{{ fuck.commentNum }}</span>
          </p>

          <p class="p2">被采纳的建议</p>
          <div>
            <div class="uia">
              <img src="@/assets/girl.png" alt="" />
              <h2>猪小妹</h2>
              <p class="opop">获得20H币</p>
              <p class="youfu">2018.9.20</p>
            </div>
          </div>
          <p @click="show = true" class="yus">
            你好，面神经炎也叫面神经麻痹或周围性面瘫，急性期可以应用抗病毒药物和激素，营养神经，活血等治疗，同时可以合并针灸
          </p>
          <div class="khz"></div>

          <van-overlay :show="show" @click="show = false" class="opopq">
            <div class="hzhz">
              <div class="ysjy" @click="tiaozhuan1">
                <div class="qqq">
                  <img src="@/assets/y1.png" alt="" />
                </div>
                <div class="right">
                  <h2>小楠楠</h2>
                  <p class="xiao">
                    面神经出现面部肌肉瘫痪可以通过服用药物衣机针灸`按摩等非手术方法进行治疗和改善,一般会慢慢康复
                  </p>
                  <span class="sj">07/04/2018</span>

                  <span class="dz"
                    ><img src="@/assets/点赞.png" alt="" class="cai" /> 99
                    <img src="@/assets/踩.png" alt="" class="cai" /> 5</span
                  >
                </div>
              </div>
              <div class="ysjy1">
                <div class="qqq">
                  <img src="@/assets/y2.png" alt="" @click="tiaozhuan" />
                </div>
                <div class="right" @click="tiaozhuan1">
                  <h2>小妮子</h2>
                  <p class="xiao">
                    继续听医生的安排给予激素类药物衣机营的药物对症处理同时配合针灸理疗效果还是很好的大多数都会痊愈所以不要着急
                  </p>
                  <span class="sj">03/22/2018</span>
                  <span class="dz"
                    ><img src="@/assets/点赞.png" alt="" class="cai" /> 99
                    <img src="@/assets/踩.png" alt="" class="cai" /> 5</span
                  >
                </div>
              </div>
            </div>

            <div class="fbfb">
              <div><van-icon name="clear" class="qqq" /></div>
              <input type="text" placeholder="在此发表你的看法" @click="fabiao1" />
            </div>
          </van-overlay>
        </div>
      </el-main>
    </el-container>
  </div>
  <div class="chengkai"></div>
  <div class="xie">
    <img src="@/assets/编辑(1).png" alt="" class="xie1" @click="fabiao" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import router from '@/router'
// import {useMyStore} from '@/stores/my_Store'
const route = useRoute()
const show = ref(false)
const flag = ref(false)
const fuck = ref([])
// const Mystore=useMyStore();
// const mystore=ref(Mystore.getArray())
const getDeatail = async (id: number) => {
  await axios
    .get(`/health/user/sickCircle/v1/findSickCircleInfo?sickCircleId=${id}`)
    .then((res) => {
      console.log(res.data.result)
      fuck.value = res.data.result
    })
}
getDeatail(route.query.id)

const sc=()=>{
  flag.value=!flag.value;
  if(fuck.value){
    // Mystore.addToArray(fuck.value)
  }
  // console.log(Mystore.getArray);
  console.log(fuck.value);
  //  if(mystore.value){
  //   fuck.value.collectionNum++;
  // }
}
const qx=()=>{
  flag.value=!flag.value;
}
const yuia = () => {
  router.push('/my_message')
}
const fabiao1 = () => {
  router.push('/fabiao')
}
const fabiao = () => {
  router.push('/fabiao')
}
const www = () => {
  router.push('/my')
}
const tiaozhuan = () => {
  router.push('/yhxx')
}
const tiaozhuan1 = () => {
  router.push('/yhxx2')
}
// const getlist=()=>{
//     axios.get(`/health/user/sickCircle/v1/findSickCircleInfo?sickCircleId=`+id).then((res)=>{
//         console.log(res)
//         datalist.value=res.data.result;
//     })
// }
// getlist();
</script>

<style scoped lang="scss">

.cai{
  width: 20px; // 30px * 0.5
  height: 20px; // 30px * 0.5
}
.dz {
  font-size: 20px; // 20px * 0.5
  position: absolute;
  right: 5%; // 5% * 0.5
  bottom:  5%; // 5% * 0.5
}
.hzhz{
  width: 100%;
  height: 17.8rem; // 17.8rem * 0.5
}
.liu{
  width: 100%;
  height:  10px; // 20px * 0.5
}
.zhuye {
  width: 1rem; // 1rem * 0.5
  height:  1rem; // 1rem * 0.5
  position: absolute;
  left: 1rem; // 1rem * 0.5
  top: 5%; // 5% * 0.5
}
.bofang {
  width: 1rem; // 1rem * 0.5
  height: 1rem; // 1rem * 0.5
  position: absolute;
  right:  1rem; // 1rem * 0.5
  top: 5%; // 5% * 0.5
}
.dxhz {
  width: 100%;
  height: 1.4rem; // 1.4rem * 0.5
  background-color: #fff;
  position: fixed;
  bottom: 0%;
  left: 0%;
  background-image: url('../../assets/beijing1.png');
  background-size: 100% 100%;
  z-index: 997;
}

.yes {
  margin-top: .1rem;
width: 0.7rem; // 0.7rem * 0.5 = 0.35rem
  height: 0.8rem; // 0.8rem * 0.5 = 0.4rem
}
.xie {
  width:  1.5rem; // 1.5rem * 0.5
  height:  1.5rem; // 1.5rem * 0.5
  position: fixed;
  left: 43%; // 43% * 0.5
  bottom: 5%; // 5% * 0.5
  background-color: yellow;
  z-index: 998;
  background-color: rgb(47, 135, 234);
  box-shadow: 0 0 5px 2.5px rgba(47, 135, 234, 0.3); // 10px和5px分别减半
  border-radius: 50%;
  img {
    margin-top:  0.3rem; // 0.3rem * 0.5
    margin-left: 0.3rem; // 0.3rem * 0.5
    width: 60%;
    height: 60%;
  }
}
.uia {
  margin-top:0.5rem; // 0.5rem * 0.5
  width: 100%;
  height: 1rem; // 1rem * 0.5
  position: relative;
  h2{
    font-size: 14px; // 28px * 0.5
    line-height: 0px;
    font-weight: 500;
  }
  h2,p{
    margin-left:1.5rem; // 1.5rem * 0.5
  }
  img{
    width: 1rem; // 1rem * 0.5
    height: 1rem; // 1rem * 0.5
    position: absolute;
    top: -27%; // -27% * 0.5
    left:3%; // 3% * 0.5
  }
}
.youfu {
  position: absolute;
  right: 0%;
  top: 0%;
}
.opopq {
  z-index: 999;
}
.opop {
  line-height: 1rem; // 1rem * 0.5
  color: rgb(234, 189, 105);
}
.cheng {
  width: 100%;
  height:  1.5rem; // 1.5rem * 0.5
}
.ysjy {
  display: flex;
  position: absolute;
  width: 100%;
  height:135px; // 135px * 0.5
  top: 40%; // 40% * 0.5
  left: 0;
 .qqq {
    width: 2.5rem; // 2.5rem * 0.5
    height: 2.5rem; // 2.5rem * 0.5
    position: relative;
    img {
      position: absolute;
      top:10%; // 10% * 0.5
      left:35%; // 35% * 0.5
      border-radius: 50%;
      width: 50%;
      height: 50%;
    }
  }
 .right {
    width: 70%;
    height: 2.6rem; // 2.6rem * 0.5
    background-color: #fff;
    border-radius: 5px; // 5px * 0.5
    margin-left:10px; // 10px * 0.5
    position: relative;
    font-size: 6.5px; // 13px * 0.5
   .xiao {
      width: 90%;
      margin: 0 auto;
      font-size: 10px; // 20px * 0.5
    }
    h2 {
      font-size: .35rem;
      width: 90%;
      line-height: 0.8rem; // 0.8rem * 0.5
      margin-left: 0.3rem; // 0.3rem * 0.5
    }
   .sj {
      position: absolute;
      font-size: 9px; // 18px * 0.5
      font-weight: 500;
      left: 5%; // 5% * 0.5
      bottom: 5%; // 5% * 0.5
    }
   .dz {
      font-size: 10px; // 20px * 0.5
      position: absolute;
      right: 0%;
      bottom: 0%;
    }
  }
}
.xx {
  width: 100px; // 100px * 0.5
  height: 100px; // 100px * 0.5
}
.oror {
  margin-top: 10px; // 10px * 0.5
  margin-right: 5px; // 5px * 0.5
}
.fbfb {
  display: flex;
  width: 100%;
  height: 60px; // 60px * 0.5
  position: absolute;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  bottom: 10%; // 10% * 0.5
  left: 0;
 .qqq {
    margin-left: 15%; // 15% * 0.5
    line-height: 60px; // 60px * 0.5
    font-size: 1rem; // 1rem * 0.5
  }
  input {
    line-height: 1rem; // 1rem * 0.5
    width: 70%;
    height: 1rem; // 1rem * 0.5
    background-color: #000;
    color: #fff;
    margin-left: 10px; // 10px * 0.5
    border-radius: 1rem; // 1rem * 0.5
    padding-left: 1rem; // 1rem * 0.5
    font-size: 0.4rem; // 0.4rem * 0.5
    border: none;
  }
}
.ysjy1 {
  display: flex;
  position: absolute;
  width: 100%;
  height: 135px; // 135px * 0.5
  top: 60%; // 60% * 0.5
  left: 0;
 .qqq {
    width: 2.5rem; // 2.5rem * 0.5
    height: 2.5rem; // 2.5rem * 0.5
    position: relative;
    img {
      position: absolute;
      top:  10%; // 10% * 0.5
      left: 35%; // 35% * 0.5
      border-radius: 50%;
      width: 50%;
      height: 50%;
    }
  }
 .right {
    width: 70%;
    height:  2.6rem; // 2.6rem * 0.5
    background-color: #fff;
    border-radius:  5px; // 5px * 0.5
    margin-left:10px; // 10px * 0.5
    position: relative;
    font-size:13px; // 13px * 0.5
   .xiao {
      width: 90%;
      margin: 0 auto;
      font-size: 10px; // 20px * 0.5
    }
   .sj {
      position: absolute;
      font-size: 9px; // 18px * 0.5
      font-weight: 500;
      left: 5%; // 5% * 0.5
      bottom:  5%; // 5% * 0.5
    }
    h2 {
      font-size: .35rem;
      margin-left: 0.3rem; // 0.3rem * 0.5
      line-height: 0.8rem; // 0.8rem * 0.5
    }
   .dz {
      font-size: 10px; // 20px * 0.5
      position: absolute;
      right: 0%;
      bottom: 0%;

    }
  }
}

.fuck {
  width: 100%;
  height:  350px; // 350px * 0.5
}
.el-header {
  position: fixed;
  background-color: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height:  1.5rem; // 1.5rem * 0.5
  border-bottom: 5px solid #ccc; // 5px * 0.5
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-header-icon {
  font-size: 15px; // 30px * 0.5
}
.ls {
  color: rgb(102, 165, 240);
  margin-top: 10px; // 20px * 0.5
  line-height:1rem; // 1rem * 0.5
}

.p1 {
  line-height: 10px; // 10px * 0.5
color: #626161;
  span{
    line-height: 20px;
  }
}
.p2{
  font-size:15px; // 20px * 0.5
  margin-top: 0.5rem; // 0.5rem * 0.5
  padding: 10px; // 10px * 0.5
  border-left: 10px solid rgb(47, 135, 234); // 10px * 0.5
  color: rgb(97, 97, 97);
}
.img1 {
  width: 80%;
  height: 150px; // 300px * 0.5
  margin-left: 10%;
}
.zp {
  width: 100%;
  height: 0.8rem; // 0.8rem * 0.5
  position: relative;
}
.ic {
  position: absolute;
  color: deepskyblue;
  font-size: 0.7rem; // 0.7rem * 0.5
  top: 0%;
  right: 10%; // 10% * 0.5
}
.ic1 {
  position: absolute;
  color: gold;
  font-size: 0.7rem; // 0.7rem * 0.5
  top: 0%;
  right: 24%; // 24% * 0.5
}
.fff {
  position: absolute;
  margin-right: 0.3rem; // 0.3rem * 0.5
  margin-top:  0.5rem; // 0.5rem * 0.5
  font-size: 0.4rem; // 0.4rem * 0.5
  font-weight: 600;
  top: -35%; // -35% * 0.5
  right: 17%; // 18% * 0.5
}
.fff1 {
  position: absolute;
  margin-right: 0.1rem; // 0.1rem * 0.5
  margin-top: 0.5rem; // 0.5rem * 0.5
  font-size: 0.4rem; // 0.4rem * 0.5
  font-weight: 600;
  top: -35%; // -35% * 0.5
  right: 5%; // 5% * 0.5
}
.khz {
  width: 100%;
  height:0.2rem; // 0.2rem * 0.5
}
.hg {
  font-size: 1rem; // 1rem * 0.5
}
.baga{
  width: 96%;
  margin-left:2%; // 2% * 0.5
}
.chengkai{
  width: 100%;
  height: 1.5rem; // 1.5rem * 0.5
}
.yus{
  width: 90%;
  margin-left: 5% ; // 5% * 0.5
  font-size: 11px; // 22px * 0.5
  color: rgb(99, 99, 99);
  padding:2px; // 2px * 0.5
}
</style>
